<template>
  <div class="container">
    <!-- 卡片视图 -->
    <el-card>
      <el-row type="flex" :gutter="30">
        <el-col :span="20">
          <span>关键字</span>
          <el-input
            style="width: 300px;"
            v-model="queryInfo.keyword"
          ></el-input>
        </el-col>
        <el-col :span="4">
          <el-button @click="close">清楚</el-button>
          <el-button type="primary" @click="handleFilter">搜索</el-button>
        </el-col>
      </el-row>
      <!-- 提示框 -->
      <el-alert
        :title="`数据一共${total}条`"
        type="info"
        show-icon
        :closable="false"
        style="margin-top: 20px;"
      >
      </el-alert>
      <!-- 表单 -->
      <el-table
        :key="tableKey"
        :data="goodsList"
        border
        style="margin-top: 20px;    "
      >
        <el-table-column prop="id" label="编号" width="200"> </el-table-column>
        <el-table-column label="题型" width="50">
          <template v-slot="{ row }">
            <span v-if="row.questionType == 1">单选</span>
            <span v-else-if="row.questionType == 2">多选</span>
            <span v-else>简搭</span>
          </template>
        </el-table-column>
        <el-table-column label="项目编号" width="200">
          <template v-slot="{ row }">
            <span
              v-for="(item, index) in row.questionIDs"
              :key="index.id"
              style="color : #409EFF"
              @click="btnclickId(item.id)"
              >{{ item.number }}<br
            /></span>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="录入时间" width="180">
        </el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间（s）">
        </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率（%）">
        </el-table-column>
        <el-table-column prop="userName" label="录入人"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="removeUser(scope.row.id)"
              plain
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="fr">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>

      <!-- 预览 -->
      <el-dialog title="题目预览" :visible.sync="flag" width="60%">
        <questions-preview v-if="flag" :id="id"></questions-preview>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="flag = false">关闭</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions.js'
import questionsPreview from '../components/questions-preview.vue'
export default {
  components: {
    questionsPreview
  },
  data() {
    return {
      tableKey: '',
      queryInfo: {
        keyword: '',
        page: 1,
        pagesize: 20
      },
      goodsList: [],
      total: 0,
      flag: false,
      id: ''
    }
  },
  created() {
    this.getGoodsList()
  },
  mounted() {},
  methods: {
    onSubmit() {
      console.log('submit!')
    },
    // 获取数据
    async getGoodsList() {
      const { data } = await randoms(this.queryInfo)
      console.log(data)
      this.goodsList = data.items
      this.total = data.counts
    },
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getGoodsList()
    },
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage
      this.getGoodsList()
    },

    // 删除
    async removeUser(id) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该题目, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)

      if (confirmResult !== 'confirm') return this.$message.info('已经取消删除')
      try {
        await removeRandoms({ id })

        this.getGoodsList()
        this.$message.success('删除成功!')
      } catch (err) {
        this.$message.error('删除失败')
      }
    },
    //  搜索
    handleFilter() {
      this.queryInfo.page = 1
      this.getGoodsList(this.queryInfo)
    },
    btnclickId(id) {
      this.flag = true
      this.id = id
    },
    close() {
      this.queryInfo.keyword = ''
      this.getGoodsList()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-pagination {
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>
